<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head th:include="base/head.html::static">
<title>假条</title>

<!--标签插件-->
<link rel="stylesheet" th:href="@{/js/jquery-tags-input/jquery.tagsinput.min.css}">

</head>
  
<body>
<div class="lyear-layout-web">
  <div class="lyear-layout-container">
    <!--左侧导航-->
    <aside class="lyear-layout-sidebar" th:include="base/base.html::left"></aside>

    <!--头部信息-->
    <header class="lyear-layout-header" th:include="base/base.html::header"></header>
    
    <!--页面主要内容-->
    <main class="lyear-layout-content">
      
      <div class="container-fluid">
        
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                
                <form action="/leave-note/apply" method="post" class="row">

                  <div class="form-group col-md-12">
                    <div class="col-md-2">
                      <label for="dep">学院</label>
                      <div class="dropdown">
                      <button th:text="${session.dep}" class="btn btn-default dropdown-toggle" type="button" id="dep"
                              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        学院
                        <span class="caret"></span>
                      </button>
                      <ul class="dropdown-menu dep" aria-labelledby="dep">
                        <li th:each=" dep : ${depList}"><a href="#" th:text="${dep.departmentName}">信息工程学院</a></li>
                        <!--<li><a href="#">建筑学院</a></li>-->
                      </ul>
                    </div>
                    </div>
                    <div class="col-md-2">
                      <label for="class" >班级</label>
                      <div class="dropdown">
                        <button th:text="${session.user.className}" class="btn btn-default dropdown-toggle" type="button" id="class"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu class" aria-labelledby="class" id="classUi">
                          <li th:each="class:${classList}">
                            <a href="#" th:text="${class.className}">软件1722</a>
                          </li>
                          <!--<li><a href="#">软件1723</a></li>-->
                        </ul>
                      </div>
                    </div>
                    <div class="col-md-3">
                      <label for="userNum">学&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                      <input th:value="${session.user.userNum}" type="text" class="form-control" id="userNum" name="userId"  placeholder="请输入学号" />
                    </div>
                    <div class="col-md-2">
                      <label for="realName">姓&nbsp;&nbsp;&nbsp;&nbsp;名</label>
                      <input th:value="${session.user.realName}" type="text" class="form-control" id="realName" name="userName" placeholder="请输入姓名" />
                    </div>

                    <div class="col-md-3">
                      <label for="courseName">课程名字</label>
                      <div class="dropdown">
                        <button class="btn btn-default dropdown-toggle" type="button" id="courseName"
                                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                          课程
                          <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu courseName" aria-labelledby="courseName" id="courseUl">
                          <li th:each="course:${courseList}"><a th:text="${course.courseName}" href="#">java基础</a></li>
                          <!-- <li><a href="#">python基础</a></li>-->
                        </ul>
                      </div>
                    </div>


                  </div>


                  <div class="form-group col-md-12">&nbsp;</div>

                  <div class="form-group col-md-12">

                    <div class="col-md-6"><label for="timeStart">开始时间</label>
                      <input class="form-control js-datetimepicker" type="text" id="timeStart"
                             name="timeStart" placeholder="请选择具体时间" value="" data-side-by-side="true"
                             data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm:ss" />
                    </div>
                    <div class="col-md-6">
                      <label for="timeEnd">结束时间</label>
                      <input class="form-control js-datetimepicker" type="text" id="timeEnd"
                             name="timeEnd" placeholder="请选择具体时间" value="" data-side-by-side="true"
                             data-locale="zh-cn" data-format="YYYY-MM-DD HH:mm:ss" />
                    </div>

                  </div>

                  <div class="form-group col-md-12">&nbsp;</div>

                  <div class="form-group col-md-12">

                    <label for="cause">理由</label>
                    <textarea class="form-control" id="cause" name="cause"
                              rows="5" value="" placeholder="说明请假原因"></textarea>
                  </div>

                  <div class="form-group col-md-12">&nbsp;</div>

                  <div class="form-group col-md-12">
                    <button type="button" onclick="sendLeaveNote();" class="btn btn-primary ajax-post" target-form="add-form">确 定</button>
                    <button type="button" class="btn btn-default" onclick="javascript:history.back(-1);return false;">返 回</button>
                  </div>
                </form>
       
              </div>
            </div>
          </div>
          
        </div>
        
      </div>
      
    </main>
    <!--End 页面主要内容-->
  </div>
</div>



<!--时间选择插件-->
<script th:src="@{/js/bootstrap-datetimepicker/moment.min.js}"></script>
<script th:src="@{/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js}"></script>
<script th:src="@{/js/bootstrap-datetimepicker/locale/zh-cn.js}"></script>


<script type="text/javascript">
  $(function(){
    $('.dropdown .dep a').click(function() {
      var field = $(this).data('field') || '';
      var dep=$(this).text();
      $('#dep').html($(this).text() + ' <span class="caret"></span>');

      axios.get("/leave-note/class/"+dep).then(
              function (response) {
                //给班级赋值
                $("#classUi").html("");
                //alert(JSON.stringify(response.data),);
                for(var i=0;i<response.data.length;i++){
                  var className=response.data[i].className;
                  var li=$("<li><a href=\"#\">"+className+"</a></li>");
                  li.appendTo($("#classUi"));
                };
                $('.dropdown .class a').click(function() {
                  var field = $(this).data('field') || '';
                  $('#class').html($(this).text() + ' <span class="caret"></span>');
                });
      });
      axios.get("/leave-note/course/"+dep).then(
              function (response) {
                //给班级赋值
                $("#courseUl").html("");
                for(var i=0;i<response.data.length;i++){
                  var courseName=response.data[i].courseName;
                  var li=$("<li><a href=\"#\">"+courseName+"</a></li>");
                  li.appendTo($("#courseUl"));
                };
                $('.dropdown .courseName a').click(function() {
                  var field = $(this).data('field') || '';
                  $('#courseName').html($(this).text() + ' <span class="caret"></span>');
                });
              });
    });
    //重新修改方法内部下拉框失效
    $('.dropdown .class a').click(function() {
      var field = $(this).data('field') || '';
      $('#class').html($(this).text() + ' <span class="caret"></span>');
    });
    $('.dropdown .courseName a').click(function() {
      var field = $(this).data('field') || '';
      $('#courseName').html($(this).text() + ' <span class="caret"></span>');
    });
  });
</script>

<script type="text/javascript">
  var sendLeaveNote=function () {
    var departmentName=$("#dep").text();
    var className=$("#class").text();
    var courseName=$("#courseName").text();
    var userId=$("#userNum").val();
    var userName=$("#realName").val();
    var timeStart=$("#timeStart").val();
    var timeEnd=$("#timeEnd").val();
    var cause=$("#cause").val();
    axios({
      method:'post',
      url: '/leave-note/apply',
      data:{
        departmentName: departmentName,
        className: className,
        courseName: courseName,
        userId: userId,
        userName: userName,
        timeStart: timeStart,
        timeEnd: timeEnd,
        cause: cause
      }
    }).then(
            function (reponse) {
                alert(reponse.data);
                window.location.reload();
            });

  }

</script>
</body>
</html>